/**
 *filename: common.scss
 *author: xhh
 *description: 整个网站公用样式，还没有编译的文件，用的是sass语法写
 *date: 2018.03.19
 */
 /* 变量 */
 $txtmColor: #000;;
 $txtsColor: rgb(102,102,102);
 $bdColor: #ccc;
 /* 超出部分隐藏 start*/
 html,body {
    position: relative;
    font-size: 16px;
    font-family: arial,"Microsoft YaHei","微软雅黑",Helvetica,Tahoma,Arial,STXihei,sans-serif;
    overflow-x: hidden;
 }
 /* 超出部分隐藏 end */ 
 /* 清除浮动的类 start */
.clearfix::before,
.clearfix::after{
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
    clear: both;
}
/* 清除浮动的类 end */
/* 网站的版心 start */
.wrapper {
    max-width: 1200px;
    min-width: 600px;
    margin: 0 auto;
}
/* 头部 start */
.site-header {
    z-index: 100000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, .75);
    .wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        // 网站logo
        .site-logo {
            img {
                max-height: 2.6rem;
                width: auto;
            }
        }
        // 网站头部右边部分
        .site-header-right {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 85%;
            .site-header-fun {
                display: flex;
                justify-content: space-between;
                align-items: center;
                a {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #fff;
                }
                span {
                    font-size: .65rem;
                }
                i {
                    display: inline-block;
                    height: 22px;
                    width: 22px;
                    margin-left: 1.8rem;
                    background-image: url(../img/index/icon/icon_nav.png);
                    background-repeat: no-repeat;
                }
                .c-en {
                    margin-left: 1.8rem;
                }
                .icon-login {
                    background-position: 3px 2px;
                }
                .icon-shipping {
                    background-position: 0 -60px;
                }
            }
        }
        // 网站导航部分
        .site-header-nav {
            width: 75%;
        }
        .header-nav-list {
            display: flex;
            // justify-content: space-around;
            width: 100%;
            li {
                position: relative;
                flex-grow: 1;
                text-align: center;
                &.active {
                    a {
                        background-color: rgba($color: #fff, $alpha: .85);
                        color: #333;
                        font-weight: 600;
                    }
                }
                >a {
                    display: inline-block;
                    height: 100%;
                    width: 100%;
                    line-height: 5.4;
                    font-size: .875rem;
                    color: #fff;
                    &:hover {
                        transition: all .2s linear;
                        background-color: rgba($color: #fff, $alpha: .85);
                        color: #333;
                        font-weight: 600;
                    }
                }
            }
            ul {
                display: none;
                width: 100%;
                position: absolute;
                top:75px;
                background-color: rgba($color:#000,$alpha: .65);
                a {
                    line-height: 4;
                }
            }
        }
    }
}
/* 头部 end */
// 底部链接区域
.site-footer {
    margin-top: 3rem;
    border-top: 1px solid $bdColor;
}
// 资料链接部分
.site-info-links {
    margin-top: 4%;
    .info-links-list {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .info-links-item {
        flex-grow: 1;
        text-align: center;
        display: flex;
        justify-content: center;
        a {
            color: #222;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        h3 {
            font-weight: 600;
            font-size: .875rem;
            margin-top: .5rem;
        }
        i {
            display: inline-block;
            width: 50px;
            height: 50px;
            background-image: url(../img/public/icon_sprite.png);
            background-repeat: no-repeat;
            background-size: cover;
        }
        .icon-back {
            background-position: 0 0;
        }
        .icon-support {
            background-position: 0 -100px;
        }
        .icon-shipping {
            background-position: 0 -200px;
        }
        .icon-quality {
            background-position: 0 -300px;
        }
    }
}
.site-footer-links {
    display: flex;
    box-sizing: border-box;
    border-right: 1px solid $bdColor;
    border-left: 1px solid $bdColor;
    // 包裹自定义列表的盒子
    .footer-links-box {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 20%;
        padding: 2rem 0;
        &.last {
            width: 20%;
            border-right: 1px solid $bdColor;
            border-left: 1px solid $bdColor;  
            .footer-links-contacts {
                display: flex;
                flex-direction: column;
                align-items: center;
            }  
            .footer-dl {
                padding-left: 0;
            }        
        }
    }
    // 自定义列表
    .footer-dl {
        padding-left: 2rem;
    }
    // 自定义列表表头
    .footer-dt {
        padding-bottom: 1rem;
        .dt-title {
            font-weight: 600;
            font-size: 1.2rem;
            text-transform: capitalize;
            color:  $txtmColor;
        }
    }
    // 自定义列表内容
    .footer-dd {
        display: flex;
        a {
            text-transform: capitalize;
            padding-bottom: .2rem;
            line-height: 2;
            font-size: .875rem;
            color:  $txtsColor;
            transition: all .3s linear;
            &:hover {
                color: $txtmColor;
                font-weight: 600;
            }
        }
    }
    // 联系我们
    .footer-links-contacts {
        .phone {
            a {
                font-size: 1.4rem;
                color: #000;
            }
        }
        // 联系人
        .contact {
            a {
                color: #666;
                transition: all .3s linear;
                &:hover {
                    color: #000;
                    font-weight: 600;
                }
            }
        }
        // 地址
        .address {
            a {
                font-size:.875rem;
                color: #c29673;
                transition: all .3s linear;
                &:hover {
                    color:#e5a750;
                    font-weight: 600;
                }
            }
        }
    }
     // 底部logo
    .footer-links-logo {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 20%;
        a {
            max-width: 50%;
        }
        img {
            max-width: 100%;
        }
    }

}
// 底部版权内容
.site-footer-copyright {
    width: 100%;
    border-top: 1px solid $bdColor;
    border-bottom: 1px solid $bdColor;
    margin-bottom:2rem;
    .wrapper {
        display: flex;
        box-sizing: border-box;
        border-right: 1px solid $bdColor;
        border-left: 1px solid $bdColor;  
    }
    // 备案信息
    .copyright {
        width: 80%;
        padding: 1.4rem 0 1.4rem 2rem;
        display: flex;
        align-items: center;
        color: $txtsColor;
        font-size: .875rem;
        box-sizing: border-box;
        img {
            max-width: 100%;
        }
        p {
            margin-left: .8rem;
        }
    }
    // 微信、微博
    .getnews {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 20%;
        padding: 1.4rem 0;
        border-left: 1px solid $bdColor;
        a {
            position: relative;
            width: 30px;
            height: 30px;
            background: url(../img/public/icon_wei.png) no-repeat;
            line-height: 30px;
        }
        // 微博图标
        .footer-weibo {
            margin-right: 1.6rem;
            background-position: 0 0;
            &:hover {
                border-bottom: none;
                background-position: 0 -30px;
            }
        }
        // 微信图标
        .footer-weixin {
            background-position: 0 -60px;
            &:hover {
                border-bottom: none;
                background-position: 0 -90px;
            }
        }
    }
}

/* 网站底部样式 end */

/* 遮罩层 start */
.mask {
    display: none;
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba($color: #000000, $alpha: .65);
}
/* 遮罩层 end */
/* 登陆框 start */
.site-login-wrapper {
    display: none;
    z-index: 1001;
    position: fixed;
    top: 50%;
    left: 50%;
    padding: 3% 2%;
    background-color: #fff;
    transform: translate(-50%,-50%);
    .icon-close {
        position: absolute;
        top: 5px;
        right: 5px;
        height: 20px;
        width: 20px;
        background:url(../img/index/icon/icon_close.png) no-repeat center;
        background-size: cover;
        cursor: pointer;
    }
    h2 {
        font-size: 1.2rem;
        text-transform: uppercase;
    }
    .login-input-box {
        position: relative;
        display: flex;
        flex-direction: column;
        margin-top: 1.2rem;
        border-bottom: 1px solid #ddd;
        label {
            color: #666;
            font-size: .875rem;
        }
        input {
            padding-right: 6rem;
            margin-top: .5rem;
            border: 0 none;
            font-size: 1rem;
            line-height: 2;
            text-indent: 5px;
            background: transparent;
            outline: none;
        }
        ::-webkit-input-placeholder {
            color: #ccc;
        }
        a {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translate(0,40%);
            font-size: .65rem;
            color: #666;
            &:hover {
                color: #333;
            }
        }
    }
    .radio-box {
        border-bottom: 0 none;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        label {
            cursor: pointer;
        }
        input {
            margin-right: .8rem;
        }
    }
    .login-btn {
        width: 100%;
        padding: .8rem 0;
        border: 0 none;
        margin-top: 1.2rem;
        text-transform: uppercase;
        color: #fff;
        background-color: #000;
    }
    p {
        margin-top: 1rem;
        text-align: center;
        a {
            color: #999;
        }
    }
}
/* 登陆框 end */
/* css3的媒体查询 start */
/* 768px~979px显示的样式 start */
@media (min-width: 768px) and (max-width: 979px) { 
    html {
        font-size: 15px;
    }
}
/* 768px~979px显示的样式 end */
/* 小于767px显示的样式 start */
@media (max-width: 767px) { 
    html {
        font-size: 14px;
    }
}
/* 小于767px显示的样式 end */
/* 小于500px显示的样式 start */
@media (max-width: 520px) {// 底部链接区域
}
/* 小于500px显示的样式 end */
/* css3的媒体查询 end */
